<template>
    <div class="sidebar">
        <Menu theme="primary" width="200px" :active-name="activeMenu" ref="leftMenu" :open-names="openSubMenus">
            <template v-for="(item,k) in items">
                <template v-if="item.subs">
                <Submenu :key="k" :name="item.name">
                    <template slot="title">
                        <Icon :type="item.icon" />
                        {{item.title}}
                    </template>
                    <MenuItem v-for="lv3 in item.subs" :key="lv3.name" :name="lv3.name" :to="'/'+lv3.name">{{lv3.title}}</MenuItem>
                </Submenu>
                </template>
                <template v-else>
                    <MenuItem :key="item.name" :name="item.name" :to="'/'+item.name"><Icon :type="item.icon" />{{item.title}}</MenuItem>
                </template>
            </template>
        </Menu>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeMenu: '', //选中的菜单
                openSubMenus: [],  //自动展开的子菜单
                //3级菜单都在cache中，根据一级菜单组件传来的change_menu1事件获取2，3级菜单内容
                items: [
                    
                ]
            }
        },
        created: function (){
            
        },
        watch: {
            //路由变化时更新菜单定位（比如点击面包屑导航时）
            $route (){
                this.posiMenu();
            }
        },
        methods: {
            posiMenu(){
                //根据路径自动激活菜单，展开所有子菜单
                let name = this.$route.name;
                if(name == 'product_form') name = 'product';
                if(name == 'cate_custom') name = 'product_cate';
                if(name == 'resume_form') name = 'resume';
                if(name == 'news_form') name = 'news';
                if(name == 'role_form') name = 'role';
                if(name == 'repeat_item') name = 'repeat';
                this.activeMenu = name;
                this.openSubMenus = [];
                for(let k in this.items) {
                    if(this.items[k].subs) {
                        this.openSubMenus.push(this.items[k].name);
                    }
                }
                this.$nextTick(() => {
                    if(!this.$refs.leftMenu) return;
                    this.$refs.leftMenu.updateOpened();
                    this.$refs.leftMenu.updateActiveName();
                });
            },
        },
        mounted(){
            //监听总线事件
            this.bus.$on('change_menu1', index => {
                let i = index.replace('index_', '');
                let menu = pub.admin('menu');
                this.items = menu[i].subs;
                this.posiMenu();
            });
        },
    }
</script>

<style scoped>
    .sidebar{
        display: block;
        position: absolute;
        width: 200px;
        left: 0;
        top: 60px;
        bottom:0;
        height: 90%;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .sidebar > ul {
        height:100%;
    }
</style>
